.container1{
	margin-left: -100px;
	display: inline-block;
	}

.main{
   background-color: #cccccc;
	margin:0 auto;
}

      @font-face {
    font-family: inglobal; /* Гарнитура шрифта */
    src: url(../fonts/inglobal.ttf); /* Путь к файлу со шрифтом */
   }
   
   @font-face {
    font-family: Resphekt; /* Гарнитура шрифта */
    src: url(../fonts/resphekt.ttf); /* Путь к файлу со шрифтом */
   }
   
      @font-face {
    font-family: Fowviel; /* Гарнитура шрифта */
    src: url(../fonts/fowviel.ttf); /* Путь к файлу со шрифтом */
   }


body {
	line-height: 1;
	font-family: inglobal;
	font-family: Fowviel;
	font-family: Resphekt; 
}







ul.nice-menu {
	font-family: Resphek,"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:16px;
	width:230px;
	height: 100%;
    list-style: none;
	margin-right: 0px;
    margin-top: 0px;
	-moz-box-shadow:0px 0px 0px #800000 inset;
	-webkit-box-shadow:0px 0px 0px #000 inset;
	box-shadow:0px 0px 0px #800000;
	text-shadow:0px 0px 0px #000080;
	z-index: 0;
	margin-left: 0px;
	text-transform:uppercase;
	font-family: Resphek,Cuprum;
	color: #FFFFFF;
	clear:both;
	background: #FFFFFF;
}

@-moz-keyframes expand {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  100% {
    width: 100%;
    padding-left: 0px;
  }
}

@-moz-keyframes expand-bounce {
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  50% {
    width: 150px;
  }
  
  70% {
    width: 140px;
  }
  
  80% {
    width: 150px;
  }
  
  90% {
    width: 140px;
  }
  
  100% {
    width: 100%;
    padding-left: 0px;
  }
}

@-webkit-keyframes expand {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  100% {
    width: 100%;
    padding-left: 0px;
  }
}

@-webkit-keyframes expand-bounce {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  50% {
    width: 150px;
  }
  
  70% {
    width: 130px;
  }
  
  80% {
    width: 150x;
  }
  
  90% {
    width: 140px;
  }
  
  100% {
    width: 100%;
    padding-left: 0px;
  }
}

@-moz-keyframes shrink {
  
  0% {
    width: 230px;
    padding-left: 0px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-moz-keyframes shrink-bounce {
  
  0% {
    width: 230px;
    padding-left: 0px;
  }
  
  50% {
    width: 5px;
  }
  
  70% {
    width: 35px;
  }
  
  80% {
    width: 5px;
  }
  
  90% {
    width: 15px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-webkit-keyframes shrink {
  
  0% {
    width: 230px;
    padding-left: 0px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-webkit-keyframes shrink-bounce {
  
  0% {
    width: 230px;
    padding-left: 0px;
  }
  
  50% {
    width: 5px;
  }
  
  70% {
    width: 35px;
  }
  
  80% {
    width: 5px;
  }
  
  90% {
    width: 15px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}



ul.nice-menu li {

  width: 5px;
  height: 30px;
  line-height: 10px;
  padding: 0px 0px 0px 0px;
  margin-top:3px;
  background: transparent;
  width: 5px;

}

ul.nice-menu.tight li {
  margin-top: 0 !important;
}

ul.nice-menu li {
z-index: 99999;
  -moz-animation-name: shrink;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li {
z-index: 99999;
  -moz-animation-name: shrink-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu li:hover {
  width: 230px;
  padding-left:0px;
  -moz-animation-name: expand;
  -moz-animation-duration: 0.3s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li:hover {
  -moz-animation-name: expand-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu a{
z-index: 99999;
  width: 230px;
  
	
	color: #6A48D7;
	font-family: Fowviel;
	font-size:16px;
    padding: 0px 0px;
	float:left;
	clear:both;
	text-shadow:0px 0px 0px #111;
  position: absolute;

  padding-left: 10px;

}
ul.nice-menu a:hover{
color: #FFFFFF;
}

ul.nice-menu #g{
color:  #57ff33;
}

ul.nice-menu #g:hover{
color:  #FFFFFF;
}

ul.nice-menu  a.ccc
{
  height: 35px;
  line-height: 35px;
}

ul.nice-menu li.L1 {
  background:#2F0065;
}

ul.nice-menu li.L2 {
  background: #876ED7;
}

ul.nice-menu li.L3 {
  background:#6A48D7;
}

ul.nice-menu li.L4 {
  background: #3914AF;
} 

ul.nice-menu li.L5 {
  background:#9F3ED5;
}


ul.nice-menu li.L6 {
  background: #6A48D7;
}
ul.nice-menu li.L7 {
  background: #57ff33;
}